<template>
    <div class="content-items" @click="canClick?toRouter(`/main/${content.post_id}`):doFalse()">
        <div class="title">
            <p>{{content.post_title}}</p>
            <span @click.stop="jubao()">···</span>
        </div>
        <div v-if="user && content.user" class="user">
            <img :src="content.user.headimgurl" alt="">
            <span class="user-name">{{content.user.username}}</span>
            <span class="profession" v-if="content.tag&&content.tag.length">{{content.tag[0].tag_name}}</span>
            <img v-if="content.is_card_check == '1'" class="user_img_icon" src="/static/img/icon-autonym@2x.png" alt="">
            <img v-if="content.is_atip_check == '1'" class="user_img_icon" src="/static/img/icon-company@2x.png" alt="">
            <img v-if="content.is_agent_check == '1'" class="user_img_icon" src="/static/img/icon-agency@2x.png" alt="">
        </div>
        <div class="content-text">
           {{content.content}}
        </div>
        <div class="content-img" v-if="content.images">
            <img v-for="(img,index) in content.images" :key="index" :src="img.img_url" alt="">
        </div>
        <div class="status" v-if="user || (content.onwer&&content.onwer.ownership_status == 2) || (content.permission$&&content.permission.permission_status == 2)">
            <div class="hui" v-if="content.onwer&&content.onwer.post_onwer_id">所有权
                <span class="black">{{content.onwer | onwerType}}</span>
            </div>
            <div class="hui" v-if="content.permission$&&content.permission.post_permission_id">许可权
                <span class="black">{{content.permission | permissionType}}</span>
            </div>
        </div>
        <div class="content-more">
            <div class="content-more-left">
                <img src="/static/img/icon-currency@2x.png" alt="">
                {{content.invest_money || 0}}
            </div>
            <div class="hui content-more-right">
               <div>
                  <img src="/static/img/icon-share@2x.png" alt="">
               </div>
               <div>
                   <img src="/static/img/icon-message-grey@2x.png" alt="">
                   <span>{{content.comment_num || 0}}</span>
               </div>
               <div>
                   <img src="/static/img/icon-praise-grey@2x.png" alt="">
                   <span>{{content.praise_num || 0}}</span>
               </div>
            </div>
        </div>
                                                <!-- 
                                                onwer，permission为所有权和许可权信息 
                                                onwer，permission不存在,即未申请 
                                                status: 1审核中 2通过 3拒绝
                                                -->
                                               <!-- 
                                                   user判断是否需要显示登记信息
                                                   (content.onwer&&content.onwer.ownership_status == 2) false即所有权未登记
                                                   (content.permission$&&content.permission.permission_status == 2) false即许可权未登记
                                                   如果两个都为true 这块内容不需要展示  所以用了!()来判断是否需要展示这块内容
                                                -->
        <div class="status_user" v-if="!user&&!((content.onwer&&content.onwer.ownership_status == 2)&&(content.permission$&&content.permission.permission_status == 2))">
            <div>
                                                <!-- 
                                                    判断是否需要展示 审核中的信息
                                                    首先判断 是否有所有权和许可权 处于审核中状态
                                                    即(content.permission&&content.permission.permission_status == 1) || (content.onwer&&content.onwer.ownership_status ==1)
                                                    为什么带&&呢，因为如果content.permission不存在,这段内容就会报错，切存在这种content.permission不存在的情况(未申请即为不存在)
                                                    即 所有权申请了吗？申请了在审核中吗？没有的话 许可权在申请吗？申请了在审核中吗？ 如果都没有，那么不展示此块内容
                                                 -->
               <p v-if="(content.permission&&content.permission.permission_status == 1) || (content.onwer&&content.onwer.ownership_status ==1)">
                   <!-- 
                       这块根据上面注释说明,
                       第一段 需要判断许可权是否在审核中,来展示 许可权登记审核中这段文字
                       第二段 是判断是否两个都在审核中,如果两个都在审核中,那么中间需要用 '、'隔开
                       第三段 需要判断所有权是否在审核中,来展示 所有权登记审核中这段文字
                    -->
                   {{(content.permission&&content.permission.permission_status == 1)?'许可权':'' 
                   +(content.permission&&content.permission.permission_status == 1)&&(content.onwer&&content.onwer.ownership_status ==1)?'、':''
                   + (content.onwer&&content.onwer.ownership_status ==1)?'所有权':'' 
                   + '登记审核中'}}
               </p>
            </div>
            <div>
                <!-- 
                       这块根据上面注释说明,
                       第一段 需要判断 许可权和所有权 是否都没有登记 如果都没有登记 就显示（知识产权登记）
                       第二段 是判断是否 所有权登记了，但是许可权没有登记 如果是 就显示 （许可权登记）
                       第三段 是判断是否 许可权登记了，但是所有权没有登记 如果是 就显示 （所有权登记）
                    -->
                    <!-- 这还看不懂。。。我就无能为力了 -->
                <div class="owner_button" v-if="(!content.permission || content.permission.permission_status == 3)
                &&(!content.onwer || content.onwer.ownership_status == 3)">知识产权登记</div>
                <div class="owner_button" v-else-if="(!content.permission || content.permission.permission_status == 3)">许可权登记</div>
                <div class="owner_button" v-else-if="(!content.onwer || content.onwer.ownership_status == 3)">所有权登记</div>
            </div>
        </div>
        <!-- <div class="property" @click.stop="cStop()" v-if="property">
            <div class="hui">
                所有权登记审核中
            </div>
            <div class="property_box">
                许可权登记
            </div>
        </div> -->
        <mt-popup position="bottom" ref="popup" pop-transition="popup-fade" lockScroll="true" v-model="popupVisible">
            <div class="bottom_box" @click="toRouter(`/comments/report_type?id=${content.post_id}`)">举报</div>
            <div class="back_hui"></div>
            <div class="bottom_box" @click="popupVisible = false">取消</div>
        </mt-popup>
    </div>
</template>

<script>
import { Popup } from 'mint-ui'
export default {
    props: {
        // true是在首页查看 是有作者信息，没有登记信息的
        // false是自己查看 没有作者信息, 有登记信息和操作
        user:{
            type:Boolean,
            default:true
        },
        // 帖子内容
        content:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            popupVisible:false,
            canClick:true
        }
    },
    components:{
       mtPopup:Popup
    },
    methods:{
        cStop(){
            return false
        },
        jubao(){
          this.popupVisible = true;
          this.canClick = false
        },
        toRouter(path){
            this.$router.push(path)
        },
        doFalse(){
            return false
        }
    },
    watch:{
        popupVisible(to,from){
            if(!to){
                setTimeout(()=>{
                    this.canClick = true
                })
            }
        }
    },
    filters:{
        onwerType(value){
             if(value.is_owner_sale == 1){
               if(value.num > 0){
                   return '出售中'
               }else{
                   return '已售空'
               }
             }else{
                 return '已认证'
             }
        },
        permissionType(){
            if(value.is_peimission_sale == 1){
               if(value.remaining_num > 0){
                   return '出售中'
               }else{
                   return '已售空'
               }
             }else{
                 return '已认证'
             }
        }
    },
    created() {}
}
</script>

<style scoped>
.status_user{
    height: 1.3rem;
    border-top: solid 1px rgb(240,240,240);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.owner_button{
    padding:.1rem .3rem;
    border:1px solid rgba(151,151,151,1);
    border-radius: 5px
}
.bottom_box{
    height: 1.1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom_box:first-child{
    border-bottom:solid 1px #cccccc
}
.content-more-right{
    display: flex;
    align-items: center;
}
.content-more-right img{
    width: .4rem;
    height: .4rem;
}
.content-more-right >div{
    margin-left: .3rem;
    display: flex;
    align-items: center
}
.content-more-right >div>span{
    margin-left: .1rem
}
.content-text{
    min-height: .9rem
}
.content-items {
    padding: 0.24rem;
    padding-bottom: 0;
    background: #fff;
    margin-bottom: 0.24rem;
}
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.36rem;
    margin-bottom: 0.32rem;
}
.title p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-right: 0.2rem;
    font-weight: 600;
}
.title > span {
    font-weight: 600;
}
.user {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:.2rem
}
.user img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.user span {
    margin: 0.08rem;
}
.user .profession {
    padding: 0.02rem 0.1rem;
    border: 1px solid rgba(230, 230, 230, 1);
    border-radius: 2px;
    font-size: 0.24rem;
}
.content-text {
    color: rgba(0, 0, 0, 0.54);
    font-size: 0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.content-img {
    width: 100%;
    display: flex;
}
.content-img img {
    width: 2.18rem;
    height: 2.18rem;
    margin: 0.16rem 0.24rem 0.24rem 0;
}
.status {
    display: flex;
}
.status > div {
    flex: 1;
}
.status > div:nth-child(2) {
    padding-left: 0.24rem;
    border-left: solid 1px rgba(223, 223, 223, 1);
}
.content-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    
}
.content-more-left img{
    width: .5rem;
    height: .5rem;
    margin-right: .12rem
}
.content-more-left{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .36rem;
    font-weight: 600
}
.property{
    width: 100%;
    height: 1.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.property_box{
    padding: 0.12rem .4rem;
    border: solid 1px rgba(151,151,151,1);
    border-radius: 4px;
}
.user_img_icon{
    width: .32rem !important;
    height: .32rem !important;
    margin-left: .1rem !important
}
</style>
